import { DownOutlined } from '@ant-design/icons'
import { Button, Space } from 'antd'
import { ResetButton, SearchButton } from '@/components/button'
import React from 'react'

export type SearchButtonGroupType = {
  /** 查询 */
  onSearch?: React.MouseEventHandler<HTMLElement> | undefined
  /** 重置 */
  onRest?: React.MouseEventHandler<HTMLElement> | undefined
  /** 是否展示 展开收起 */
  showExpand?: boolean
  /** 是否展开 */
  expand?: boolean
  /** 展开收起变更事件 */
  onExpand?: (expand: boolean) => void
}

/**
 * 标准查询按钮组
 */
export const StandardSearchButtonGroup = (props: SearchButtonGroupType) => {
  const { onSearch, onRest, showExpand, expand, onExpand } = props
  return (
    <Space>
      <SearchButton onClick={onSearch} />
      <ResetButton onClick={onRest} />
      {showExpand && (
        <Button
          type="link"
          onClick={() => onExpand?.(!expand)}
          icon={<DownOutlined rotate={expand ? 180 : 0} />}
          iconPosition="end"
          style={{ padding: 0 }}
        >
          {expand ? '收起' : '展开'}
        </Button>
      )}
    </Space>
  )
}
